<template>
    <div>
        <div class="operate-panel">
            <Button type="success" @click="submit" class="submit">提交</Button>
            <Button type="primary" @click="test" class="test">测试</Button>
        </div>
        <div id="svg-container" class="rule">
            <div class="node-container">
                <node v-for="node in nodeList()" :key="node.meta.id" :node='node' @ex="draw"></node>
            </div>
        </div>
    </div>
</template>

<script>
    import Raphael from 'raphael'
    import Node from '@/components/Node'
    import {mapGetters, mapActions} from 'vuex'

    import * as NodeType from '@/lib/node-type'

    export default {
        name: 'about',
        components: {Node},
        data() {
            return {
                paper: undefined
            }
        },
        methods: {
            ...mapGetters(['nodeList', 'coordinates', 'height', 'width', 'factors', 'operators', 'actions']),
            ...mapActions(['GenerateTree', 'DoSubmit', 'FetchRuleSet', 'SetCurrentNode', 'AddNode']),
            async init() {
                await this.FetchRuleSet()
            },
            buildPathInfo(position) {
                return "M" + position.startX + "," + position.startY
                    + " C" + position.startX + "," + position.endY
                    + "," + position.startX + "," + position.endY
                    + "," + position.endX + "," + position.endY;
            },
            // 绘制
            draw() {
                let _vm = this
                this.$nextTick(() => {
                    _vm.paper.setSize(_vm.width(), _vm.height())
                    _vm.paper.clear()
                    _vm.coordinates().forEach(coordinate => {
                        let path = _vm.buildPathInfo(coordinate)
                        _vm.paper.path(path).attr({
                            'arrow-end':'classic-wide-long',
                            stroke: '#aaa',
                            'stroke-width': 1
                        })
                    })
                })
            },
            test() {
                alert('开始测试')
            },
            submit() {
                this.DoSubmit()
            }
        },
        updated() {
            this.draw()
        },
        mounted() {
            this.paper = Raphael('svg-container', '100%', '100%')
            this.init()
        }
    }
</script>

<style lang="scss" scoped>
    .operate-panel {
        .submit {
            margin: 10px;
        }
    }
    .rule {
        position: absolute;
        left: 10px;
        top: 60px;
    }
</style>